@use 'transition';

:root {
  // 字体颜色
  --text-light: #000000FF;
  --text-dark: #FCFCFCFF;

  // 背景颜色
  --bg-light: #FFFEF9FF;
  --bg-second-light: #FBFBFB;
  --bg-third-light: #F4F4F4;

  --bg-dark: #0F1423FF;
  --bg-second-dark: #1F2937FF;
  --bg-third-dark: #374151FF;

  // 阴影颜色
  --shadow-light: rgba(0, 0, 0, 0.2);
  --shadow-dark: rgba(0, 0, 0, 0.8);
  --shadow-size: .5rem;

  // border-radius
  --border-radius: 1rem;
  --border-radius-sm: 0.5rem;
  --border-radius-xs: 0.25rem;

  // hover 颜色
  --hover-color: #F59E0B;
}

.use-radius {
  border-radius: var(--border-radius) !important;
}

.use-radius-sm {
  border-radius: var(--border-radius-sm) !important;
}

.use-radius-xs {
  border-radius: var(--border-radius-xs) !important;
}

.use-theme {
  color: var(--text-light) !important;
  background-color: var(--bg-light) !important;
}

.use-transparent {
  &,
  &:deep(*) {
    background-color: transparent !important;
  }
}

.\!use-transparent {
  &,
  &:deep(*) {
    background-color: transparent !important;
  }
}

.\!use-theme-deep {
  &, &:deep(*) {
    color: var(--text-light) !important;
    background-color: var(--bg-light) !important;
  }
}

.use-second-bg {
  color: var(--text-light) !important;
  background-color: var(--bg-second-light) !important;
}

.use-third-bg {
  color: var(--text-light) !important;
  background-color: var(--bg-third-light) !important;
}

.use-font-theme {
  color: var(--text-light) !important;
}

.use-shadow {
  box-shadow: 0 0 var(--shadow-size) var(--shadow-light) !important;
}

/* 文字镂空效果 */
.hollow-text {
  color: var(--bg-light);
  text-shadow: 0 0 1px var(--text-light),
  0 0 2px var(--text-light),
  0 0 2px var(--text-light),
  0 0 2px var(--text-light),
  0 0 2px var(--text-light),
  0 0 2px var(--text-light),
  0 0 2px var(--text-light),
  0 0 2px var(--text-light),
  0 0 2px var(--text-light);
}

.box-filter-shadow {
  filter: drop-shadow(0 0 5px var(--shadow-light)) !important;
}

.use-hover {
  &:hover {
    color: var(--hover-color) !important;
    background: var(--hover-color) !important;
  }
}

.use-hover-color {
  &:hover {
    color: var(--hover-color) !important;
  }
}

.use-hover-bg {
  &:hover {
    background: var(--hover-color) !important;
  }
}

/* dark 模式 */
html:where([data-theme="dark"], [data-theme="dark"] *) {

  .use-theme {
    color: var(--text-dark) !important;
    background-color: var(--bg-dark) !important;
  }

  .use-second-bg {
    color: var(--text-dark) !important;
    background-color: var(--bg-second-dark) !important;
  }

  .use-third-bg {
    color: var(--text-dark) !important;
    background-color: var(--bg-third-dark) !important;
  }

  .use-font-theme {
    color: var(--text-dark) !important;
  }

  .use-shadow {
    box-shadow: 0 0 var(--shadow-size) var(--shadow-dark) !important;
  }

  .hollow-text {
    color: var(--bg-dark);
    text-shadow: 0 0 1px var(--text-dark),
    0 0 2px var(--text-dark),
    0 0 2px var(--text-dark),
    0 0 2px var(--text-dark),
    0 0 2px var(--text-dark),
    0 0 2px var(--text-dark),
    0 0 2px var(--text-dark),
    0 0 2px var(--text-dark),
    0 0 2px var(--text-dark);
  }

  .box-filter-shadow {
    filter: drop-shadow(0 0 5px var(--shadow-dark)) !important;
  }
}


.hover-big {
  &:hover {
    scale: 1.12;
  }
}

.hover-small {
  &:hover {
    scale: 0.95;
  }
}